<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		#ad{
			width: 300px;
			height: 200px;
			background: url(ad.jpg) no-repeat;
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
<script type="text/javascript">
	
window.onload = function(){
	var ad = document.getElementById("ad");
	
//	获得可视区域的宽高
	var win_height = document.documentElement.clientHeight;
	var win_width = document.documentElement.clientWidth;
	
//	计算可以达到的最大的top和left值
	var max_top = win_height - ad.offsetHeight;
	var max_left = win_width - ad.offsetWidth;
	var x=1,y=1;
	
//	设置定时器,每隔一段时间就改变一下left和top
	setInterval(function(){
//		获得旧的left和top值
		var old_left = ad.offsetLeft;
		var old_top = ad.offsetTop;
		
//		计算新的left和top值
		var new_left = old_left+x;
		var new_top = old_top+y;
		
//		将新值赋值回去
		ad.style.left = new_left+'px';
		ad.style.top = new_top+'px';
		
		if (new_top == max_top) {
			y = -1;
		}
		if (new_top==0) {
			y = 1;
		}
		if (new_left==max_left) {
			x = -1;
		}
		if (new_left==0) {
			x = 1;
		}
	},3)
	
}
	
</script>
	</head>
	<body>

		<div id="ad">
			<img src="close.jpg" id="close"/>
		</div>
		
	</body>
</html>
